<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度换肤</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            background-image: url("images/4.jpg");
        }
        
        .btn {
            width: 50px;
            height: 50px;
            background: url("images/upseek.png");
            display: block;
            /*固定定位*/
            position: fixed;
            top: 0px;
            right: 0px;
        }
        
        .btn:hover {
            background: url("images/upseek.png") 0px -64px;
        }
        
        .huanfu {
            width: 100%;
            height: 120px;
            background: rgab(0, 0, 0, .5);
            display: none;
        }
        
        .huanfu .con {
            width: 705px;
            height: 120px;
            /* background: red; */
            /* margin:上下 左右; */
            margin: 0px auto;
            position: relative;
        }
        
        .huanfu .con img.but1 {
            position: absolute;
            left: 0px;
            top: 45px;
        }
        
        .but2 {
            position: absolute;
            right: 0px;
            top: 45px;
        }
        
        .scroll {
            width: 672px;
            height: 120px;
            /* background: #999900; */
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        
        .imgList {
            width: 1000%;
            height: 110px;
            /* border: 2px solid blue; */
            position: absolute;
            /* 动画-改变它的值 */
            left: 0px;
            top: 0px;
        }
        
        .imgList ul li {
            width: 138px;
            height: 75px;
            list-style-type: none;
            float: left;
            margin: 10px 11px 0;
            border: 4px solid #fff;
        }
    </style>
</head>

<body>
    <a href="#" class="btn"></a>
    <!-- 换肤开始 -->
    <div class="huanfu">
        <div class="con">
            <img src="images/dirl.png" class="but1">
            <img src="images/dirr.png" class="but2">
            <!-- 滚动内容开始 -->
            <div class="scroll">
                <div class="imgList">
                    <ul>
                        <li><img src="images/1-1.jpg"></li>
                        <li><img src="images/2-2.jpg" width="138px" height="75px"></li>
                        <li><img src="images/3-3.jpg" width="138px" height="75px"></li>
                        <li><img src="images/4-4.jpg" width="138px" height="75px"></li>
                        <li><img src="images/5-5.jpg" width="138px" height="75px"></li>
                        <li><img src="images/6-6.jpg" width="138px" height="75px"></li>
                        <li><img src="images/7-7.jpg" width="138px" height="75px"></li>
                        <li><img src="images/8-8.jpg" width="138px" height="75px"></li>
                        <li><img src="images/9-9.jpg" width="138px" height="75px"></li>
                        <li><img src="images/10-10.jpg" width="138px" height="75px"></li>
                        <li><img src="images/11-11.jpg" width="138px" height="75px"></li>
                        <li><img src="images/12-12.jpg" width="138px" height="75px"></li>
                        <li><img src="images/13-13.jpg" width="138px" height="75px"></li>
                        <li><img src="images/14-14.jpg" width="138px" height="75px"></li>
                        <li><img src="images/15-15.jpg" width="138px" height="75px"></li>
                        <li><img src="images/16-16.jpg" width="138px" height="75px"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        // 点击右上角按钮显示和展开效果
        $(".btn").click(function() {
            $(".huanfu").slideToggle("slow");
        });
        // 点击图片列表，更换浏览器背景
        $(".imgList ul li").click(function() {
            // 获取对应小图的地址
            var simg = $(this).find("img").attr("src");
            var bimg = simg.replace(/-\d*/, "");
            $("body").css({
                "background": "url(" + bimg + ")"
            });
        });

        // 当点击左按钮时
        var clickNum = 0;
        $(".but2").click(function() {
            clickNum++;
            if (clickNum >= 4) {
                // alert("左边到头了");
                clickNum = 3;
            }
            $(".imgList").animate({
                left: -672 * clickNum
            }, 1000);

        })

        // 当点击右按钮时
        $(".but1").click(function() {
            clickNum--;
            if (clickNum < 0) {
                // alert("右边到头了");
                clickNum = 0;
            }
            $(".imgList").animate({
                left: -672 * clickNum
            }, 1000);

        })
    </script>
</body>

</html>